<template>
    <div class="search_chat_wrap hisorical_wrap" @click="chatFunctionActive=false">
        <div class="side_fold" v-show="chating&&siderArray[0].active&&activeRecords" :class="{side_fold_open:personal_chat_list}" @click.stop.prevent="closeHistorical"></div>
        <div id='personal_chat' v-show='personal_chat_list&&chating'>
                <div class="h_n_head">
                    <div class="m-no-select">消息记录</div>
                    <div class='personal_chat_close' @click.stop.prevent="closeHistorical"></div>
                </div>
                <div class="checkBox">
                    <div class="check_item" v-for="(item,index) in checkArray" @click="showResult(index)" :key="`reco_${index}`" v-show="(item!='群成员' && toInfo.isGroup != '1') || toInfo.isGroup == '1'">
                        <div class="item" :style="{color:activeIndex == index?'#fa7500':'#333'}" >{{item}}</div>
                        <div class="redLine" v-if="activeIndex == index"></div>
                        <div v-if="activeIndex == index" class="l_line"></div>
                        <div v-if="activeIndex == index" class="r_line"></div>
                        <div v-if="activeIndex != index" class="b_line"></div>
                    </div>
                </div>
                <div class='personal_chat_first' v-if="activeIndex != 2">
                    <div class='homeHeaderFirstColse'>
                        <div class='homeSearch'></div>
                        <input type="text" class='homeInput' :placeholder="activeIndex == 0?'搜索聊天内容': activeIndex == 3 ?'搜索成员' : '搜索文件名称'" maxlength="20" v-model='chatSearch' @click.stop.prevent=''>
                        <img class="c_l_icon" draggable="false" src="static/image/home/clear_icon.png"  @click='clearChatSearch' />
                    </div>
                </div>
                <div style="margin-bottom: 5px;" :style="{'margin-top':activeIndex == 2?'10px':0}">
                    <!-- <row style="padding:0 1em;" v-if="activeRecords">
                        <i-col span="11" style="margin-right:15px;">
                            <Date-picker type="date" :options="datepickerOptions" :editable='false' @on-change="startTime"  placeholder="开始日期"></Date-picker>
                        </i-col>
                        <i-col span="11">
                            <Date-picker type="date" :options="datepickerOptions" :editable='false' @on-change="endTime" placeholder="结束日期"></Date-picker>
                        </i-col>
                    </row>	 -->
                    <div v-if="activeRecords" class="select-wrap">
                        <el-date-picker
                        class="my_el_select my_el_select_time"
                        v-model="hisTime"
                        type="datetimerange"
                        format="yyyy-MM-dd HH:mm:ss"
                        align="right"
                        unlink-panels
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="$store.state.pickerOptions"
                        @change="startTime"
                        >
                        </el-date-picker>
                        <el-select
                            v-if="activeIndex == 1"
                            v-model="downloadState"
                            class="my_el_select my_el_select_samll"
                            placeholder="下载情况"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="records_msg_wrap" v-if="activeRecords && activeIndex != 2" ref='recordScroll'>
                    <viewer :images="chatSearchList">
                        <template  v-for="(item,index) in chatSearchList">
                            <!-- zk122修改渲染条件，针对翻页 -->
                            <div :key="'chat_'+item.messageId"  @contextmenu.stop.prevent='chatFunctionCt($event,item)'>
                                <div class='list_msg_info' v-if='item.type=="text"' @click="historyItemClick(item)">
<!--                                    <img draggable="false" v-if='item.sendId==myInfo.id' v-lazy="!$isNull(myInfo.head)?(`${$store.state.headPathUrl}${myInfo.id}${myInfo.head}.PNG`):`static/image/home/person_${myInfo.gender==1?1:2}.png`" class="s_person_icon m-no-select" :onerror="defaultImg"/>-->
<!--                                    <img draggable="false" v-else v-lazy="(toInfo.isGroup=='0'&&!$isNull(toInfo.head))?(`${$store.state.headPathUrl}${toInfo.id || toInfo.sendId}${toInfo.head}.PNG`):(toInfo.isGroup=='1'&&!$isNull(item.head))?(`${$store.state.headPathUrl}${item.id || item.sendId}${item.head}.PNG`):`static/image/home/person_${item.gender==2?2:1}.png`"-->
<!--                                    class="s_person_icon" :onerror="defaultImg"/>-->
                                  <img draggable="false" v-if='item.sendId==myInfo.id' v-lazy="!$isNull(myInfo.head)?(`${$store.state.url}${$store.state.imgDownLoadUrl}${myInfo.head}`):`static/image/home/person_${myInfo.gender==1?1:2}.png`" class="s_person_icon m-no-select" :onerror="defaultImg"/>
                                  <img draggable="false" v-else v-lazy="(toInfo.isGroup=='0'&&!$isNull(toInfo.head))?(`${$store.state.url}${$store.state.imgDownLoadUrl}${toInfo.head}`):(toInfo.isGroup=='1'&&!$isNull(item.head))?(`${$store.state.url}${$store.state.imgDownLoadUrl}${item.head}`):`static/image/home/person_${item.gender==2?2:1}.png`"
                                       class="s_person_icon" :onerror="defaultImg"/>
                                    <div class='list_msg_value records_text_w'>
                                        <div class="m-no-select  re_t_n"><div>{{item.sendId==myInfo.id?myInfo.name:item.name}}</div><div>{{item.time | timeFormat}}</div></div>
                                        <div v-html="getFontConfigure(item)" class="re_t_val" style="display:block;line-height:18px;"></div>
                                    </div>
                                </div>
                                <!-- <div v-else-if="item.type=='image'&&activeIndex == 2">
                                    图片显示
                                </div> -->
                                <div v-else-if='item.type=="image"'  class='list_msg_info m-no-select' @click="initView(item,index,chatSearchList)">
<!--                                    <img draggable="false" v-if='item.sendId==myInfo.id' v-lazy="!$isNull(myInfo.head)?(`${$store.state.headPathUrl}${myInfo.id}${myInfo.head}.PNG`):`static/image/home/person_${myInfo.gender==1?1:2}.png`" class="s_person_icon m-no-select" :onerror="defaultImg"/>-->
<!--                                    <img draggable="false" v-else v-lazy="(toInfo.isGroup=='0'&&!$isNull(toInfo.head))?(`${$store.state.headPathUrl}${toInfo.id || toInfo.sendId}${toInfo.head}.PNG`):(toInfo.isGroup=='1'&&!$isNull(item.head))?(`${$store.state.headPathUrl}${item.id || item.sendId}${item.head}.PNG`):`static/image/home/person_${item.gender==2?2:1}.png`"-->
<!--                                    class="s_person_icon" :onerror="defaultImg"/>-->
                                  <img draggable="false" v-if='item.sendId==myInfo.id' v-lazy="!$isNull(myInfo.head)?(`${$store.state.url}${$store.state.imgDownLoadUrl}${myInfo.head}`):`static/image/home/person_${myInfo.gender==1?1:2}.png`" class="s_person_icon m-no-select" :onerror="defaultImg"/>
                                  <img draggable="false" v-else v-lazy="(toInfo.isGroup=='0'&&!$isNull(toInfo.head))?(`${$store.state.url}${$store.state.imgDownLoadUrl}${toInfo.head}`):(toInfo.isGroup=='1'&&!$isNull(item.head))?(`${$store.state.url}${$store.state.imgDownLoadUrl}${item.head}`):`static/image/home/person_${item.gender==2?2:1}.png`"
                                       class="s_person_icon" :onerror="defaultImg"/>
                                    <div class='list_msg_value records_img_w'>
                                        <div class="re_i_n"><div>{{item.sendId==myInfo.id?myInfo.name:item.name}}</div><div>{{item.time | timeFormat}}</div></div>
                                        <div class="re_i_main">
                                            <img draggable="false" v-lazy="$isRelativePath(item.value)"/>
                                        </div>
                                    </div>
                                </div>
                                <!-- zk121新增 -->
                                <div class="file_item" v-else-if='item.type=="file" && activeIndex == 1' @click="historyItemClick(item)">
                                    <div class="img">
                                        <img v-lazy="$utilJs.getFileType(item.value)" alt="">
                                    </div>
                                    <div class="middle">
                                        <div class="file_name">
                                            <img v-if="item.sendId!==myInfo.id" src="static/image/home/file_receive.png" alt="" style="position: relative;top: 1px;margin-right: 6px;">
                                            {{item.value}}
                                        </div>
                                        <div class="item_detail">
                                            <span class="size">{{item.duration | convertByte}}</span>
                                            <span style="margin:0 12px">|</span>
                                            <span class="time">{{item.time | timeFormat}}</span>
                                            <span class="senduser" style="margin-left:12px">{{item.sendId==myInfo.id?myInfo.name:item.name}}</span>
                                            <div class="right">
                                                <span v-if="(item.isDownLoad=='0'||item.isDownLoad=='Message-roaming')&&item.upload!=1" @click.stop='toDownFile(item)'>下载</span>
                                                <span v-if="item.isDownLoad!='0'&&item.isDownLoad!='loading'&&item.isDownLoad!='Message-roaming'" @click.stop='toPreviewFile(item)'>打开</span>
                                                <b><span>...</span></b>
                                                <div class="r_tips">
                                                    <main>
                                                        <div v-if="item.isDownLoad!='0'&&item.isDownLoad!='loading'&&item.isDownLoad!='Message-roaming'" @click.stop.prevent='openPath(item)'>
                                                            <span><img src="static\image\home\file_folder.png" alt="">打开目录</span>
                                                        </div>
                                                        <div>
                                                            <span @click.stop="toDownload(item)"><img src="static\image\home\broadcast_enclosure.png" alt="">另存为</span>
                                                        </div>
                                                        <div>
                                                            <span @click.stop="toCopyChat(item)"><img src="static\image\home\narrowWindow.png" alt="">复制</span>
                                                        </div>
                                                        <div>
                                                            <span @click.stop="forwordItem(item)"><img src="static\image\home\forwarding.png" alt="">转发</span>
                                                        </div>
                                                    </main>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-else-if='item.type=="file"'  class='list_msg_info m-no-select' @click="historyItemClick(item)">
<!--                                    <img draggable="false" v-if='item.sendId==myInfo.id' v-lazy="!$isNull(myInfo.head)?(`${$store.state.headPathUrl}${myInfo.id}${myInfo.head}.PNG`):`static/image/home/person_${myInfo.gender==1?1:2}.png`" class="s_person_icon m-no-select" :onerror="defaultImg"/>-->
<!--                                    <img draggable="false" v-else v-lazy="(toInfo.isGroup=='0'&&!$isNull(toInfo.head))?(`${$store.state.headPathUrl}${toInfo.id || toInfo.sendId}${toInfo.head}.PNG`):(toInfo.isGroup=='1'&&!$isNull(item.head))?(`${$store.state.headPathUrl}${item.id || item.sendId}${item.head}.PNG`):`static/image/home/person_${item.gender==2?2:1}.png`"-->
<!--                                    class="s_person_icon" :onerror="defaultImg"/>-->
                                  <img draggable="false" v-if='item.sendId==myInfo.id' v-lazy="!$isNull(myInfo.head)?(`${$store.state.url}${$store.state.imgDownLoadUrl}${myInfo.head}`):`static/image/home/person_${myInfo.gender==1?1:2}.png`" class="s_person_icon m-no-select" :onerror="defaultImg"/>
                                  <img draggable="false" v-else v-lazy="(toInfo.isGroup=='0'&&!$isNull(toInfo.head))?(`${$store.state.url}${$store.state.imgDownLoadUrl}${toInfo.head}`):(toInfo.isGroup=='1'&&!$isNull(item.head))?(`${$store.state.url}${$store.state.imgDownLoadUrl}${item.head}`):`static/image/home/person_${item.gender==2?2:1}.png`"
                                       class="s_person_icon" :onerror="defaultImg"/>
                                    <div class='list_msg_value records_file_w'>
                                        <div class="re_f_n"><div>{{item.sendId==myInfo.id?myInfo.name:item.name}}</div><div>{{item.time | timeFormat}}</div></div>
                                        <div class="re_file_box">
                                            <div class="re_f_main">
                                                <div class="re_f_icon">
                                                    <img draggable="false" v-lazy="$utilJs.getFileType(item.value)" />
                                                </div>
                                                <div class="re_f_info">
                                                    <div class="re_f_val">{{item.value | interception}}</div>
                                                    <div>{{item.duration | convertByte}}</div>
                                                    <Progress v-if="item.upload==1" :percent="item.progress?item.progress:0" status="active"></Progress>
                                                </div>
                                            </div>
                                            <div class="re_f_line"></div>
                                                <div class="re_f_set" v-if="!item.uploading&&item.isDownLoad!=404">
                                                    <!-- Message-roaming代表漫游类型 -->
                                                    <div class='down_load_file' v-if="item.isDownLoad&&(item.isDownLoad=='0'||item.isDownLoad=='Message-roaming')" @click.stop.prevent='toDownFile(item)'>下载</div>
                                                    <div class='preview_file' v-if="item.isDownLoad&&item.isDownLoad!='0'&&item.isDownLoad!='Message-roaming'&&item.isDownLoad!='loading'"  @click.stop.prevent='toPreviewFile(item)'>预览</div>
                                                    <div class='preview_file' v-if="item.isDownLoad&&item.isDownLoad!='0'&&item.isDownLoad!='Message-roaming'&&item.isDownLoad!='loading'"  @click.stop.prevent='toDownload(item)'>另存为</div>
                                                    <div class='preview_file' v-if="item.isDownLoad&&item.isDownLoad!='0'&&item.isDownLoad!='Message-roaming'&&item.isDownLoad!='loading'" @click.stop.prevent='openPath(item)'>打开目录</div>
                                                </div>
                                            <div v-if="item.isDownLoad==404" class="file_msg_tip">上传失败,请重新上传</div>
                                        </div>
                                    </div>
                                </div>
                                <div v-else-if='item.type=="audio"'  class='list_msg_info m-no-select' @click="historyItemClick(item)">
<!--                                    <img draggable="false" v-if='item.sendId==myInfo.id' v-lazy="!$isNull(myInfo.head)?(`${$store.state.headPathUrl}${myInfo.id}${myInfo.head}.PNG`):`static/image/home/person_${myInfo.gender==1?1:2}.png`" class="s_person_icon m-no-select" :onerror="defaultImg"/>-->
<!--                                    <img draggable="false" v-else v-lazy="(toInfo.isGroup=='0'&&!$isNull(toInfo.head))?(`${$store.state.headPathUrl}${toInfo.id || toInfo.sendId}${toInfo.head}.PNG`):(toInfo.isGroup=='1'&&!$isNull(item.head))?(`${$store.state.headPathUrl}${item.id || item.sendId}${item.head}.PNG`):`static/image/home/person_${item.gender==2?2:1}.png`"-->
<!--                                    class="s_person_icon" :onerror="defaultImg"/>-->
                                  <img draggable="false" v-if='item.sendId==myInfo.id' v-lazy="!$isNull(myInfo.head)?(`${$store.state.url}${$store.state.imgDownLoadUrl}${myInfo.head}`):`static/image/home/person_${myInfo.gender==1?1:2}.png`" class="s_person_icon m-no-select" :onerror="defaultImg"/>
                                  <img draggable="false" v-else v-lazy="(toInfo.isGroup=='0'&&!$isNull(toInfo.head))?(`${$store.state.url}${$store.state.imgDownLoadUrl}${toInfo.head}`):(toInfo.isGroup=='1'&&!$isNull(item.head))?(`${$store.state.url}${$store.state.imgDownLoadUrl}${item.head}`):`static/image/home/person_${item.gender==2?2:1}.png`"
                                       class="s_person_icon" :onerror="defaultImg"/>
                                    <div class="list_msg_value">
                                        <div class="re_f_n"><div>{{item.sendId==myInfo.id?myInfo.name:item.name}}</div><div style="color:#b3b3b3;">{{item.time | timeFormat}}</div></div>
                                        <div class='audio_wrap'>
                                            <div class="audio_i_w"  @click='toPlayAudio(item)'>
                                                <img draggable="false" src="static/image/home/ease_chatfrom_voice_playing.png" :ref="`audio_image_${item.messageId}`"/>
                                                <audio :src="$isRelativePath(item.isDownLoad)" :ref='item.messageId' @ended="init_auto_play"></audio>
                                            </div>
                                            <div class="audio_dur">
                                                <p style="color:#333;">语音</p>
                                                <p>{{item.duration}}秒</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-else-if='item.type=="video"'  class='list_msg_info m-no-select' @click="historyItemClick(item)">
<!--                                    <img draggable="false" v-if='item.sendId==myInfo.id' v-lazy="!$isNull(myInfo.head)?(`${$store.state.headPathUrl}${myInfo.id}${myInfo.head}.PNG`):`static/image/home/person_${myInfo.gender==1?1:2}.png`" class="s_person_icon m-no-select" :onerror="defaultImg"/>-->
<!--                                    <img draggable="false" v-else v-lazy="(toInfo.isGroup=='0'&&!$isNull(toInfo.head))?(`${$store.state.headPathUrl}${toInfo.id || toInfo.sendId}${toInfo.head}.PNG`):(toInfo.isGroup=='1'&&!$isNull(item.head))?(`${$store.state.headPathUrl}${item.id || item.sendId}${item.head}.PNG`):`static/image/home/person_${item.gender==2?2:1}.png`"-->
<!--                                    class="s_person_icon" :onerror="defaultImg"/>-->
                                  <img draggable="false" v-if='item.sendId==myInfo.id' v-lazy="!$isNull(myInfo.head)?(`${$store.state.url}${$store.state.imgDownLoadUrl}${myInfo.head}`):`static/image/home/person_${myInfo.gender==1?1:2}.png`" class="s_person_icon m-no-select" :onerror="defaultImg"/>
                                  <img draggable="false" v-else v-lazy="(toInfo.isGroup=='0'&&!$isNull(toInfo.head))?(`${$store.state.url}${$store.state.imgDownLoadUrl}${toInfo.head}`):(toInfo.isGroup=='1'&&!$isNull(item.head))?(`${$store.state.url}${$store.state.imgDownLoadUrl}${item.head}`):`static/image/home/person_${item.gender==2?2:1}.png`"
                                       class="s_person_icon" :onerror="defaultImg"/>
                                    <div class='video_wrap'>
                                        <div class="re_f_n"><div>{{item.sendId==myInfo.id?myInfo.name:item.name}}</div><div>{{item.time | timeFormat}}</div></div>
                                        <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions[item.messageId]"></video-player>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </viewer>
                </div>
                <div class="record_img records_msg_wrap" v-if="activeRecords && activeIndex == 2" ref='recordScroll2'>
                    <viewer>
                        <template v-for="(item,key,index) in imgList">
                            <div class="date">{{key}}</div>
                            <div class="img_item">
                                <div class="item" v-for="(img,index) in imgList[key]" @click="initView(img,index,imgList[key])" @contextmenu.stop.prevent='chatFunctionCt($event,img)'>
                                    <img v-if="img.type == 'image'" draggable="false" v-lazy="$isRelativePath(img.value)">
                                    <video-player v-if="img.type == 'video'" class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options='{
                                        //zk122新增播放选项
                                        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                                        autoplay: false, //如果true,浏览器准备好时开始回放。
                                        muted: false, // 默认情况下将会消除任何音频。
                                        loop: false, // 导致视频一结束就重新开始。
                                        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                                        language: "zh-CN",
                                        aspectRatio: "1:1", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                                        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                                        sources: [
                                            {
                                                type: "",
                                                src: img.isDownLoad, //视频url地址
                                            },
                                        ],
                                        poster: "", //你的封面地址
                                        // width: document.documentElement.clientWidth, //播放器宽度
                                        notSupportedMessage: "无法播放", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                                        controlBar: {
                                            timeDivider: false,// 当前时间和持续时间的分隔符
                                            durationDisplay: false,// 显示持续时间
                                            remainingTimeDisplay: false,// 是否显示剩余时间功能
                                            fullscreenToggle: false, //全屏按钮
                                        },
                                    }'></video-player>
                                </div>
                            </div>
                        </template>
                    </viewer>
                </div>
                <div class="pagenum" v-if="totalPage>1">
                    <div>当前页 {{currentPage}}/{{totalPage}} </div>
                    <div style="margin-left:5px;">跳转到<input type="number" min="1" :max="totalPage" v-model="setNum" @keyup.enter="setPage(0)">页 <button @click.stop="setPage(0)">确定</button></div>
                    <div class="changepage">
                        <img src="static\image\home\page_first.png" alt="" class="skip" @click.stop="setPage(1)">
                        <img src="static\image\home\page_last.png" alt="" class="skip" @click.stop="setPage(2)">
                        <img src="static\image\home\page_next.png" alt="" class="skip" @click.stop="setPage(3)">
                        <img src="static\image\home\page_end.png" alt="" class="skip" @click.stop="setPage(4)">
                    </div>
                </div>
            </div>
            <div class="chat_function" @click.stop.prevent="" v-if="chatFunctionActive" :style='{top:chatMenuTop+"px",left:chatMenuLeft+"px"}' @mouseleave="showToForwardingClose()">
                <li class='chat_function_item' @click.stop.prevent='savePicture(currentChatItem)' v-if='currentChatItem.type=="image"'>下载</li>
                <li class='main_chat_function' v-if='(currentChatItem.type=="text"||currentChatItem.type=="image")||((currentChatItem.type=="file")&&(currentChatItem.isDownLoad!=404&&currentChatItem.isDownLoad!=0))'
                    @click.stop.prevent='toCopyChat(currentChatItem)'>复制</li>
                <div v-if="currentChatItem.isDownLoad != 404">
                    <li
                        class='chat_function_item'
                        v-if="currentChatItem.type == 'file'"
                        @mouseover="showToForwarding()"
                    >转发
                        <b class="expand">></b>
                        <ul class="list_expand" v-show="isShowForward" @mouseleave="showToForwardingClose()">
                            <li @click.stop.prevent='toForwarding(currentChatItem)'>原文件</li>
                            <li
                                v-if="currentChatItem.isDownLoad != '0' &&
                                currentChatItem.isDownLoad != 'loading' &&
                                currentChatItem.isDownLoad != 'Message-roaming'"
                                @click.stop.prevent='toForwardingLocal(currentChatItem)'
                            >本地文件
                            </li>
                        </ul>
                    </li>
                    <li
                        class='chat_function_item'
                        v-if="currentChatItem.type != 'file' &&
                        currentChatItem.type != 'announcement' &&
                        currentChatItem.type != 'screen'"
                        @click.stop.prevent='toForwarding(currentChatItem)'
                    >转发
                    </li>
                </div>
            </div>
        </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    playerOptions: {
      type: Object,
      default: {}
    },
    fullState: {
      type: Number,
      default: 0
    },
    toInfo: {
      type: Object,
      default: {
        id: "",
        name: "",
        isGroup: false
      }
    },
    chating: {
      type: Boolean,
      default: false
    },
    siderArray: {
      type: Array,
      default: []
    },
    activeRecords: {
      type: Boolean,
      default: false
    },
    personal_chat_list: {
      type: Boolean,
      default: false
    },
    expression: {
      type: Array,
      default: []
    },
    start_time: {
      type: String,
      default: ""
    },
    end_time: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      setNum: "", //zk122新增
      currentPage: 1, //zk122新增，当前页码
      totalPage: 1, //zk122新增，总页数
      imgList: {}, //zk121新增，根据日期划分图片
      staticList: [], //zk121新增,固定不变的list,用来参照
      activeIndex: 0, //zk121新增，当前哪一项激活
      checkArray: ["全部", "文件","图片/视频",'群成员' ], //zk121新增
      defaultImg:
        'this.src="' + require("../../../static/image/home/person_1.png") + '"',
      chatSearch: "",
      chatSearchList: [],
      datepickerOptions: {
        disabledDate(date) {
          // return date && date.valueOf() > Date.now() - 86400000;
          return date && date.valueOf() > Date.now();
        }
      },
      record_count: 40, //历史消息显示条数
      // start_time:null,  //消息搜索开始时间
      // end_time:null,	//消息搜索结束时间
      audio_play: null, //语音播放的refs
      audio_item: null, //语音播放的messageId
      audio_time: null, //语音播放时图片更改定时器
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.end_time) {
            return time.getTime() > new Date(this.end_time).getTime();
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.start_time) {
            return time.getTime() < new Date(this.start_time).getTime();
          }
        }
      },
      hisTime: null,
      chatMenuTop: 0,
      chatMenuLeft: 0,
      currentChatItem: {},
      currentTextCopy: "",
      isShowForward: false,
      chatFunctionActive: false,
      options: [
        {
          value: 0,
          label: "全部"
        },
        {
          value: 1,
          label: "未下载"
        },
        {
          value: 2,
          label: "已下载"
        }
      ],
      downloadState: 0 //文件下载状态
    };
  },
  watch: {
    chatSearch() {
      this.$nextTick(() => {
        if (
          this.end_time &&
          this.start_time &&
          this.end_time - this.start_time < 0
        ) {
          this.$Message.warning("时间无法倒流");
        }
        if (this.chatSearch == "") {
          this.searchChat();
        } else {
          this.currentPage = 1
          this.searchChat(this.chatSearch);
        }
      });
    },
    activeRecords() {
      if (!this.activeRecords) {
        this.chatSearchList = [];
        this.staticList = []; //zk121
        this.record_count = 40;
        this.chatSearch = "";
      } else {
        this.searchChat();
      }
    },
    downloadState() {
      this.searchChat();
    }
  },
  filters: {
    Interception(value) {
      let index = value.lastIndexOf("/");
      let str = value.substring(index + 1, value.length);
      return str;
    },
    setGroupUser(str) {
      return str.length > 4 ? str.slice(0, 4) + "..." : str;
    },
    convertByte(byteCount) {
      var count = parseFloat(byteCount),
        unitArr = ["b", "Kb", "Mb", "Gb", "Tb"],
        index = 0;
      if (!count) return 0;
      for (let i = 0; i < 5; i++) {
        if (count >= 1024) {
          count = count / 1024;
          index++;
        } else {
          return index > 0
            ? count.toFixed(2) + unitArr[index]
            : count + unitArr[index];
        }
        if (index == 4) {
          return count.toFixed(2) + unitArr[index];
        }
      }
    }
  },
  computed: {
    ...mapState(["myInfo", "user_hot_key", "ws"]),
    tableId() {
      return this.myInfo.id;
    },
    sqlTable() {
      return {
        userHotKey: `user_hot_key`,
        uninterruptedList: `uninterrupted_list_${this.tableId}`, //免打扰列表
        userInformation: `user_information_${this.tableId}`, //用户信息表
        sessionList: `session_list_${this.tableId}`, //会话列表
        broadcastList: `broadcast_list_${this.tableId}`, //广播列表
        publicList: `public_list_${this.tableId}`, //公众号列表
        groupList: `group_list_${this.tableId}`, //群列表
        messageList: `message_list_${this.tableId}`, //群聊消息表
        privateList: `private_list_${this.tableId}`, //单聊消息表
        publicRecords: `public_records_${this.tableId}`, //公众号记录表
        groupUsers: `group_users_${this.tableId}`, //	groupMessageEnity: 'GroupMessageEnity_' + this.myInfo.id,
        systemTable: `system_${this.tableId}`
      };
    }
  },
  methods: {
    initView(item, index, arr) {
      let itemList = [];
      arr.forEach(i => {
        if (i.type == "image") {
          itemList.push(i);
        }
      });
      console.log("图片列表", itemList);
      index = itemList.indexOf(item);
      let tempPics = [];
      let obj = {};
      itemList.forEach(val => {
        obj = {};
        obj.UserID = this.myInfo.id;
        obj.ImageID = val.DownLoadId;
        obj.Suffix = val.value
          .toLowerCase()
          .split(".")
          .splice(-1)[0];
        obj.ThumbnailPath = this.$isRelativePath(val.value);
        obj.OriginalImage = val.smallValue
          ? this.$isRelativePath(val.smallValue)
          : val.smallValue;
        tempPics.push(obj);
      });
      tempPics = JSON.stringify(tempPics);
      let info = this.$shell("OpenWatchPicFormczs", [tempPics, index]);
      console.log(info, "图片预览接口返回");
    },
    //获取字体配置
    getFontConfigure(e) {
      let fontSize1 = {};
      let value = this.toExpression(e.value);
      if (!e.fontSize || e.fontSize == "undefined") {
        value = `<div style="font-size:14px">${value}</div>`;
        return value;
      } else if (e.fontSize.length == 2) {
        value = `<div style="font-size:${e.fontSize}px">${value}</div>`;
        return value;
      } else {
        fontSize1 = JSON.parse(e.fontSize);
        value = `<div style="font-size:${fontSize1.size}px;color:${
          fontSize1.color
        };font-weight:${fontSize1.bold}">${value}</div>`;
        return value;
      }
    },
    setPage(index) {
      //zk122新增
      this.activeIndex == 2
        ? (this.$refs.recordScroll2.scrollTop = 0)
        : (this.$refs.recordScroll.scrollTop = 0);
      if (index == 0) {
        //按页码跳
        if (this.setNum < 1 || this.setNum > this.totalPage) {
          this.$Message.warning("输入的页码超出范围");
          this.setNum = "";
        } else {
          this.currentPage = this.setNum;
          this.setNum = "";
        }
      } else if (index == 1) {
        //首页
        this.currentPage = 1;
      } else if (index == 2) {
        //上一页
        if (this.currentPage > 1) {
          this.currentPage--;
        }
      } else if (index == 3) {
        //下一页
        if (this.currentPage < this.totalPage) {
          this.currentPage++;
        }
      } else if (index == 4) {
        //尾页
        this.currentPage = this.totalPage;
      }
      if (this.chatSearch == "") {

        this.searchChat();
      } else {
        this.searchChat(this.chatSearch);
      }
    },
    forwordItem(item) {
      //zk121新增
      this.$parent.toForwarding(item);
    },
    showResult(index) {
      //zk121新增，筛选展示内容
      if (this.activeIndex != index) {
        this.activeIndex = index;
        this.currentPage = 1;
        this.chatSearch = "";
        this.start_time = null;
        this.end_time = null;
        this.searchChat();
      }
    },
    historyItemClick(item) {
      //zk新增，点击历史消息，聊天框跳到该历史消息处
      //messageId，当前消息的id
      console.log(item, "当前点击的哪条历史消息");
      this.$emit("switchChatMain", item.messageId);
    },
    //打开浏览器
    hisoricalClick() {
      //绑在search_chat_wrap上click
      let attr = e.target.getAttribute("class");
      if (attr == "httpUrl") {
        let res = this.$shell("OpenBrowser", [e.target.innerHTML]);
      }
    },
    audio_timer_inter() {
      let i = 1;
      this.$refs[
        `audio_image_${this.audio_item.messageId}`
      ][0].src = `static/image/home/ease_chat${
        this.audio_item.id == this.myInfo.id ? "to" : "from"
      }_voice_playing_f${i}.png`;
      this.audio_time = setInterval(() => {
        i++;
        if (i == 4) i = 1;
        this.$refs[
          `audio_image_${this.audio_item.messageId}`
        ][0].src = `static/image/home/ease_chat${
          this.audio_item.id == this.myInfo.id ? "to" : "from"
        }_voice_playing_f${i}.png`;
        this.$forceUpdate();
      }, 330);
    },
    init_auto_play() {
      this.$refs[
        `audio_image_${this.audio_item.messageId}`
      ][0].src = `static/image/home/ease_chat${
        this.audio_item.id == this.myInfo.id ? "to" : "from"
      }_voice_playing.png`;
      clearInterval(this.audio_time);
      this.audio_play = this.audio_item = this.audio_time = null;
    },
    toPlayAudio(item) {
      let id = this.audio_item ? this.audio_item.messageId : "";
      let src = `static/image/home/ease_chat${
        this.audio_item && this.audio_item.id == this.myInfo.id ? "to" : "from"
      }_voice_playing.png`;
      clearInterval(this.audio_time);
      this.audio_time = null;
      this.audio_item = item;
      if (this.audio_play) {
        this.$refs[`audio_image_${id}`][0].src = src;
        this.audio_play.pause();
        if (this.audio_play != this.$refs[item.messageId][0]) {
          this.audio_play.currentTime = 0;
          this.audio_play = this.$refs[item.messageId][0];
          console.log(this.audio_play, "播放节点2");
          this.audio_play.play();
          this.audio_timer_inter();
        } else {
          this.audio_play = null;
        }
      } else {
        this.audio_play = this.$refs[item.messageId][0];
        console.log(this.audio_play, "播放节点1");
        this.audio_play.play();
        this.audio_timer_inter();
      }
    },
    closeHistorical() {
      this.$emit("closeHistorical");
    },
    toGroupFunction(index) {
      this.$emit("toGroupFunction", index);
    },
    //index --->1为搜索,其他不需要参数
    operationalDatabase(statements, index) {
      let to = JSON.stringify({
        Sqlstr: statements
      });
      return arguments[1]
        ? JSON.parse(this.$shellSQL(to, index))
        : JSON.parse(this.$shellSQL(to));
    },
    rpfileName(value) {
      let index = value.lastIndexOf("/");
      let str = value.substring(index + 1, value.length);
      return str;
    },
    //点击打开文件路径
    toDownload(item) {
      let rep = this.$shell("SaveAS", [
        this.$isRelativePath(item.isDownLoad),
        this.rpfileName(item.value)
      ]);
      rep = JSON.parse(rep);
      console.log(rep, "另存为");
      if (rep.return_code == "FALSE") {
        this.$set(item, "isDownLoad", 0);
        this.$Message.warning("系统找不到指定的文件,请重新下载");
        return;
      }
      // this.toPreviewFile(item,isDownLoad);
    },
    //文件预览
    toPreviewFile(item) {
      let rep = this.$shell("OpenFlieByUrl", [
        this.$isRelativePath(item.isDownLoad)
      ]);
      console.log(item, "文件预览", rep);
      rep = JSON.parse(rep);
      if (rep.return_code == "FALSE") {
        this.$Message.info("系统找不到指定的文件,请重新下载");
        this.$set(item, "isDownLoad", 0);
        return;
      }
    },
    toDownFile(temp) {
      this.$emit("toDownFile", temp);
    },
    //搜索个人信息开始时间
    startTime(e) {
      console.log(this.hisTime, "开始时间");
      this.currentPage = 1
      if (this.chatSearch) {
        this.searchChat(this.chatSearch);
      } else {
        this.searchChat();
      }
    },
    endTime(e) {
      if (e) {
        this.end_time = new Date(e).getTime();
        console.log(this.start_time, "2222222222222");
        if (this.end_time - this.start_time < 0) {
          this.$Message.warning("时间无法倒流");
        }
      } else {
        this.end_time = null;
      }
      if (this.chatSearch) {
        this.searchChat(this.chatSearch);
      } else {
        this.searchChat();
      }
      console.log(this.end_time, "结束时间");
    },
    clearChatSearch() {
      this.chatSearch = "";
      // console.log(this.myInfo,this.$store.state.headPathUrl,this.$isNull(this.myInfo.head))
      // console.log('toInfo',this.toInfo)
    },
    //个人聊天查询
    searchChat(value) {
      // if(this.activeIndex != 0){//zk122新增，不是显示全部的话就把时间置空
      //     this.start_time=null
      //     this.end_time=null
      // }

      this.chatSearchList = [];
      this.staticList = []; //zk121
      let id = this.toInfo.id;
      let isTrue = this.toInfo.isGroup == "1";
      var str;
      let ct1 = "";
      let ct2 = new Date().getTime();
      if (this.hisTime) {
        ct1 = new Date(this.hisTime[0]).getTime();
        ct2 = new Date(this.hisTime[1]).getTime();
      }
      let timeSearchSql = `time>='${ct1}' AND time<='${ct2}'`
      if(!ct2){
        timeSearchSql = `time>='${ct1}'`
      }
      if (value &&  this.activeIndex != 3) {
        if (isTrue) {

          str = `${
            isTrue ? this.sqlTable.messageList : this.sqlTable.privateList
          } a left join ${
            this.sqlTable.userInformation
          } b on a.sendId=b.id WHERE value LIKE '%${value}%' AND (a.receiveId='${id}' OR a.sendId='${id}') AND (${timeSearchSql})`;

          // if (this.activeIndex == 3) {
          //   str = `${
          //   isTrue ? this.sqlTable.messageList : this.sqlTable.privateList
          // } a left join ${
          //   this.sqlTable.userInformation
          // } b on a.sendId=b.id WHERE sendId LIKE '%${value}%' AND (a.receiveId='${id}' OR a.sendId='${id}') AND (time>='${ct1}' AND time<='${ct2}')`;



          // }
        } else {
          str = `${
            isTrue ? this.sqlTable.messageList : this.sqlTable.privateList
          } a left join ${
            this.sqlTable.userInformation
          } b on a.sendId=b.id WHERE value LIKE '%${value}%' AND (${
            isTrue
              ? `a.receiveId='${id}'`
              : `a.sendId='${id}' OR a.receiveId='${id}'`
          }) AND (${timeSearchSql})`;
        }
      } else {
        str = `${
          isTrue ? this.sqlTable.messageList : this.sqlTable.privateList
        } a left join ${
          this.sqlTable.userInformation
        } b on a.sendId=b.id WHERE (${
          isTrue
            ? `a.receiveId='${id}'`
            : `a.sendId='${id}' OR a.receiveId='${id}'`
        }) AND (${timeSearchSql})`;
      }
      if (this.activeIndex == 1) {
        switch (this.downloadState) {
          case 0:
            str = str + `AND a.type='file' `;
            break;
          case 1:
            str = str + `AND a.type='file' AND a.isDownLoad = '0'`;
            break;
          case 2:
            str = str + `AND a.type='file' AND a.isDownLoad != '0'`;
            break;
        }
      } else if (this.activeIndex == 2) {
        str = str + `AND (a.type='image' OR a.type='video')`;
      }
      let res
      res = this.operationalDatabase(
        `SELECT a.*,b.head FROM  ${str} ORDER BY time DESC LIMIT ${
          this.record_count
        } offset ${this.record_count * (this.currentPage - 1)};`,
        1)

      let totalRes = this.operationalDatabase(
        `SELECT count(1) total FROM  ${str} ORDER BY time DESC;`,
        1
      ); //limit 20
      console.log(res, "搜索列表", totalRes);
      let len = res.list.length;
      for (let i = 0, len = res.list.length; i < len; i++) {
        res.list[i].value = this.setHistoryMsg(res.list[i]);
      }
      // zk121修改
      let arr = res.list;
      if (this.activeIndex == 0) {
        //全部
      } else if (this.activeIndex == 2) {
        //图片、视频
        let imgList = {};
        arr.forEach(image => {
          let str = this.$options.filters["getTimeAll"](image.time);
          str = str.substring(0, 10);
          if (imgList[str]) {
            //有就插入，没有就新增
            imgList[str].push(image);
          } else {
            imgList[str] = [image];
          }
        });
        console.log(imgList, "按时间区分图片");
        this.imgList = { ...imgList };
        // this.totalPage = Math.ceil(Object.keys(imgList).length / 5);//图片显示限定5天
      }else if (this.activeIndex == 3) {

        console.log(res.list,value,833);
        arr = res.list.filter(t => {
          return !value ? true : t.sendId.includes(value)  || t.name.includes(value)
        })


      }

      this.chatSearchList = [...arr];
      this.staticList = [...arr]; //zk121
      // if(this.toInfo.isGroup == "1"){
      //     this.$ajax('group/getGroupAndUsersById.do', {
      //         groupid: id
      //     }, (msg) => {
      //         msg = msg.data;
      //         let userList = msg.users;
      //         console.log('群详情',msg)
      //         for(let i=0;i<this.chatSearchList.length;i++){
      //             for(let j=0;j<userList.length;j++){
      //                 if(this.chatSearchList[i].sendId==userList[j].ID){
      //                     this.$set(this.chatSearchList[i],'name',userList[j].NAME)
      //                     this.$set(this.chatSearchList[i],'head',userList[j].HEAD)
      //                 }
      //             }
      //         }
      //     }, (msg) => {

      //     })
      // }
      this.totalPage = Math.ceil(totalRes.list[0].total / this.record_count);
      this.$forceUpdate();
    },
    //处理历史数据
    setHistoryMsg(item) {
      if (item.type == "text") {
        return this.toExpression(this.$utilJs.regUrl(item.value));
      } else {
        return item.value;
      }
    },
    get_audio_realPath(url) {
      let reg = /\\/g;
      let res = url.replace(/\\/g, "/");
      res = res.replace("http:", "http://");
      return res;
    },
    //生成表情图片
    createFaceImage(index) {
      return `<img src='static/image/face/${index}.gif' draggable="false" style="width:1.6em;height:1.6em;vertical-align:bottom;flex-shrink:0;">`;
    },
    //处理表情
    toExpression(str) {
      var reg = /\[[\u4e00-\u9fa5]+\]/g;
      var num = [];
      var imageArr = str.match(reg);
      var imageTrue = [];
      var newArr = [].concat.apply([], this.expression);
      if (imageArr) {
        for (let i = 0, len = imageArr.length; i < len; i++) {
          for (let j = 0, lens = newArr.length; j < lens; j++) {
            if (new RegExp(newArr[j]).test(imageArr[i])) {
              num.push(this.createFaceImage(j));
              imageTrue.push(imageArr[i]);
              break;
            }
          }
        }
        for (let i in imageTrue) {
          str = str.replace(imageTrue[i], num[i]);
        }
      }
      return str;
    },
    //打开文件目录
    openPath(item) {
      let path = item.isDownLoad == "self" ? item.filePath : item.isDownLoad;
      if (this.$store.state.user_hot_key[5]) {
        let res = this.$shell("OpenPathByUrl", [
          this.$store.state.user_hot_key[5],
          path ? this.$isRelativePath(path).replace(/\//g, "\\") : "" || ""
        ]);
        // let res = this.$shell("OpenPathByUrl",[this.$store.state.user_hot_key[5]]);
        console.log(
          res,
          item,
          this.$store.state.user_hot_key[5],
          path.replace(/\//g, "\\"),
          "打开目录"
        );
      } else {
        this.$Message.warning("请先设置默认目录");
      }
    },
    //获取坐标
    getItemCoordinate(e) {
      this.chatMenuTop = e.clientY + 2 || 0;
      this.chatMenuLeft = e.clientX + 10 || 0;
    },
    // 会话功能
    chatFunctionCt($event, item) {
      if (this.activeIndex == 1) return;
      this.currentChatItem = item;
      this.currentTextCopy = window.getSelection().toString();
      this.chatFunctionActive = true;
      this.getItemCoordinate($event);
    },
    showToForwarding() {
      this.isShowForward = true;
    },
    showToForwardingClose() {
      this.isShowForward = false;
    },
    toForwarding(temp) {
      this.chatFunctionActive = false;
      this.$emit("toForwarding", temp);
    },
    //转发本地文件，先上传
    toForwardingLocal(temp) {
      let initId = this.$func.uuid();
      if (temp.isDownLoad != "self") {
        let path = temp.isDownLoad.replace(/\//g, "\\");
        let infos = this.$shell("UpLoadFile", [
          "1",
          temp.sendId,
          initId,
          this.$isRelativePath(path),
          0,
          temp.name,
          temp.receiveId
        ]);
      } else {
        let infos = this.$shell("UpLoadFile", [
          "1",
          temp.receiveId,
          initId,
          this.$isRelativePath(temp.filePath),
          0,
          temp.receiveName,
          temp.sendId
        ]);
      }
      this.chatFunctionActive = false;
      this.$emit("toForwarding", 1);
    },
    savePicture(item) {
      //zk修改，下载原图
      this.chatFunctionActive = false;
      let tableName =
        this.toInfo.isGroup == "1"
          ? this.sqlTable.messageList
          : this.sqlTable.privateList;
      this.$savePicture(item, this.myInfo, tableName);
    },
    //复制功能
    toCopyChat(item) {
      console.log(item, "点击复制的item");
      this.chatFunctionActive = false;
      if (item.type == "text") {
        let isTrue = this.toInfo.isGroup == "1";
        let str;
        str = `${
          isTrue ? this.sqlTable.messageList : this.sqlTable.privateList
        } WHERE messageId='${item.messageId}'`;
        let res = this.$operationalDatabase(
          `SELECT * FROM  ${str} ORDER BY time DESC;`,
          1
        );
        if (res.list.length > 0) {
          let value = this.$utilJs.htmlDecodeByRegExp(
            this.$utilJs.returnEncodeBr(res.list[0].value)
          );
          if (this.currentTextCopy) {
            this.$store.state.copyValue = this.currentTextCopy;
          } else {
            this.$store.state.copyValue = value;
          }
          console.log(
            this.$store.state.copyValue,
            "在历史记录中存入仓库的内容"
          );
        }
      } else if (item.type == "image" || item.type == "file") {
        //新增会话复制图片文件功能
        // if (!item.filePath && item.isDownLoad == 0) {//zk注释，复制选项的显隐已做处理
        //   this.$Message.warning("请先下载内容");
        //   return;
        // };
        let isImg = item.type == "image";
        let type = isImg ? "Bitmap" : "FileDrop";
        let data = isImg ? item.value : item.filePath || item.isDownLoad;
        let msg = this.$shell("SetClipboardData", [
          type,
          this.$isRelativePath(data)
        ]);
        this.$store.state.copyValue = null; //zk新增，复制文件和图片时，copyvalue为空
      }
      // 到粘贴板
      this.$copyText(this.$store.state.copyValue).then(
        e => {
          // success
          console.log(e);
          this.$Message.warning("内容已复制到粘贴板");
        },
        e => {
          // faile
          console.log(e);
        }
      );
    }
  },
  mounted() {
    this.searchChat();
  },
  destroyed() {
    this.chatSearchList = null;
    this.imgList = null;
  }
};
</script>
<style lang="less" scoped>
.select-wrap {
  text-align: center;
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
  .my_el_select_samll {
    width: 112px;
  }
  .my_el_select_time {
    max-width: 377px;
  }
}
.checkBox {
  width: 100%;
  height: 32px;
  line-height: 32px;
  display: flex;
  flex-wrap: nowrap;
  box-sizing: border-box;
  border-top: 1px solid #e6e6e6;
  .check_item {
    flex: 1;
    text-align: center;
    cursor: pointer;
    position: relative;
    .item {
      height: 100%;
      color: #333;
    }
    .redLine {
      height: 3px;
      width: 100%;
      background-color: #fa7500;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }
    .l_line {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 1px;
      background-color: #e6e6e6;
      z-index: 1;
    }
    .r_line {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 1px;
      background-color: #e6e6e6;
      z-index: 1;
    }
    .b_line {
      position: absolute;
      bottom: 0;
      right: 0;
      height: 1px;
      width: 100%;
      background-color: #e6e6e6;
      z-index: 1;
    }
  }
}
.file_item {
  display: flex;
  border-bottom: 1px solid #e5e5e5;
  &:hover {
    background-color: #eee;
  }
  .middle {
    flex: 1;
  }
  .img {
    line-height: 58px;
    overflow: hidden;
    img {
      width: 36px;
      height: 36px;
      vertical-align: middle;
    }
  }
  &:hover .middle > .item_detail > .right {
    display: inline-block;
  }
  .middle {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .file_name {
      font-size: 14px;
      font-weight: bold;
      width: 280px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .item_detail {
      color: #999;
      .right {
        position: relative;
        display: none;
        float: right;
        cursor: pointer;
        img {
          width: 12px;
          height: 12px;
          margin-right: 10px;
          cursor: pointer;
        }
        span:hover {
          color: #fa7500;
        }
        b {
          margin: 0 6px;
          &:hover + .r_tips {
            display: block;
          }
        }
        .r_tips {
          display: none;
          position: absolute;
          padding: 10px 0 10px 10px;
          top: 10px;
          right: 0;
          main {
            display: flex;
            background-color: #fff;
            width: 100px;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
            flex-direction: column;
            justify-content: space-around;
            div {
              margin-left: 10px;
              font-size: 12px;
              color: #333;
              height: 36px;
              span {
                line-height: 36px;
              }
            }
          }
          &:hover {
            display: block;
          }
        }
      }
    }
  }
}
.record_img {
  .date {
    line-height: 36px;
    height: 36px;
    color: #666;
  }
  .img_item {
    // display: flex;
    // justify-content: space-around;
    // flex-wrap: wrap;
    .item {
      width: 87px;
      height: 87px;
      display: inline-block;
      margin-bottom: 8px;
      margin-right: 8px;
      overflow: hidden;
      & > img {
        // width: 100%;
        // height: 100%;
        max-width: 87px;
        max-height: 87px;
      }
      .video-js .vjs-big-play-button {
        border: none !important;
      }
    }
  }
}
.pagenum {
  display: flex;
  border-top: 1px solid #e6e6e6;
  height: 32px;
  align-items: center;
  padding-left: 12px;
  overflow: hidden;
  position: relative;
  input {
    width: 50px;
    // height: 16px;
    margin: 0 3px;
    border: 1px solid #e6e6e6;
    text-align: center;
  }
  button {
    margin: 5px;
    background-color: #fa7500;
    border: 0;
    color: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
  }
  .changepage {
    height: 18px;
    line-height: 18px;
    position: absolute;
    overflow: hidden;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
    img {
      vertical-align: middle;
      cursor: pointer;
    }
  }
}
</style>
